
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&ak=5zQ9nwYR2PShtg3XHWEFDp9yGAy1E6vb"></script>-->
</head>

<body>

<div style="width:100%;height:500px;border:1px solid gray" id="container">
</div>
<script type="text/javascript">
    var map = new BMap.Map("container");
    //trafficStyle 1.4和2.0似乎不兼容
    // map.setMapStyle({styleJson:'midnight'});

    map.centerAndZoom(new BMap.Point(106.572376,29.563718), 16);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    map.addControl(top_right_navigation);

    // 启用鼠标滚轮缩放地图
    map.enableScrollWheelZoom();

    // 交通图层
    var ctrl = new BMapLib.TrafficControl({
        showPanel: true //是否显示路况提示面板
    });
    map.addControl(ctrl);
    console.log(ctrl)
    ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
    // 模拟点击，直接输出拥堵图层
    var btn = document.getElementById('tcBtn')
    btn.click()


</script>
</body>
</html>
